<template>
    <h3>列表渲染</h3>
    <!-- v-for指令相当于一个for循环,name为参数,names是要遍历的数组,
    {{ name }}中的name为依次获得names里的每一个值 -->
    <p v-for="name in names">{{ name }}</p>
    <!--对于数组来说,可以有两个值,obj为参数,index为数组下标,也可把in改为of-->
    <ul>
        <li v-for="(obj,index) in result">{{ obj.name }},{{ obj.age }}-{{ index }}</li>
    </ul>
    <!-- v-for可以遍历数组,也可以遍历对象的属性 -->
     <div v-for="val in obj" >{{ val }}</div>
     <hr>
     <!-- val代表对象里面的每一个属性值,name age 和 sex -->
      <!-- 对于对象来说可以有三个参数,一个是值val为邵小瑞,一个是键name,一个是索引0 -->
     <div v-for="(val,name,index) in obj" :key="id">{{ val }},{{ name }},{{ index }}</div>
    <!-- 补充:最好添加一个key作为唯一标识,这样在打乱顺序渲染的时候dom不会重新渲染已存在的元素,节省时间 -->
</template>
<script>
    export default{
        data(){
            return {
                names:["张三","李四","王五"],
                result:[
                    {name:"张三",age:18},
                    {name:"李四",age:19},
                    {name:"王五",age:20}
                ],
                obj:{
                    id:"001",
                    name:"邵小瑞",
                    age:2.5,
                    sex:"女"
                }
            }
        }
    }
</script>